<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生列表 - 学生管理系统</title>
    
    <!-- LayUI CSS -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    
    <style>
        /* 全局样式 */
        body {
            background-color: #f2f2f2;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        /* 头部样式优化 */
        .header {
            height: 60px;
            background: linear-gradient(to right, #393D49, #4E5465);
            color: #fff;
            line-height: 60px;
            padding-left: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
            margin-bottom: 20px;
        }
        
        .header h2 {
            font-size: 22px;
            display: inline-block;
            position: relative;
        }
        
        .header h2:after {
            content: "";
            position: absolute;
            bottom: 16px;
            left: 0;
            width: 30%;
            height: 2px;
            background-color: #5FB878;
        }
        
        /* 主内容区样式 */
        .main-content {
            padding: 20px;
        }
        
        /* 卡片样式优化 */
        .layui-card {
            margin-top: 15px;
            border-radius: 6px;
            box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }
        
        .layui-card-header {
            height: auto;
            padding: 15px 20px;
            line-height: 24px;
            background-color: #fff;
            border-bottom: 1px solid #f6f6f6;
        }
        
        .layui-card-body {
            padding: 20px;
        }
        
        /* 表格样式优化 */
        .layui-table {
            margin-top: 0;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        }
        
        .layui-table th {
            font-weight: bold;
            background-color: #FAFAFA;
            color: #333;
        }
        
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
        
        .highlight-row {
            background-color: #f8f8f8;
        }
        
        /* 学生姓名样式 */
        .student-name {
            cursor: pointer;
            color: #01AAED;
            transition: all 0.3s;
            padding: 2px 5px;
            border-radius: 3px;
        }
        
        .student-name:hover {
            background-color: #01AAED;
            color: #fff;
        }
        
        /* 按钮样式优化 */
        .layui-btn {
            border-radius: 4px;
        }
        
        .layui-btn-xs {
            border-radius: 2px;
        }
        
        /* 徽章样式优化 */
        .layui-badge {
            border-radius: 3px;
            padding: 4px 8px;
            font-weight: normal;
            height: 38px;
            line-height: 38px;
            font-size: 14px;
        }
        
        /* 底部样式 */
        .layui-footer {
            text-align: center;
            padding: 15px;
            background-color: #fff;
            color: #666;
            font-size: 12px;
            box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.05);
            margin-top: 20px;
        }
        
        /* 弹出框样式优化 */
        .layui-layer-title {
            background-color: #393D49 !important;
            color: #fff !important;
        }
        
        /* 表单样式优化 */
        .layui-form-label {
            width: 90px;
        }
        
        .layui-input-block {
            margin-left: 120px;
        }
        
        .layui-input, .layui-textarea {
            border-radius: 3px;
        }
        
        .layui-input:focus, .layui-textarea:focus {
            border-color: #5FB878 !important;
        }
        
        /* 性别显示统一样式 */
        .gender-text {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 3px;
            background-color: #f2f2f2;
            color: #666;
        }
        
        /* 统一按钮区域样式 */
        .header-btns {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        
        .header-btns .layui-btn, 
        .header-btns .layui-badge {
            margin-left: 10px;
        }
        
        /* 响应式优化 */
        @media screen and (max-width: 768px) {
            .layui-card-header .layui-col-md6:last-child {
                text-align: left !important;
                margin-top: 10px;
            }
            
            .layui-form-label {
                width: 70px;
            }
            
            .layui-input-block {
                margin-left: 100px;
            }
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <h2>学生管理系统</h2>
                </div>
                <div class="layui-col-md6" style="text-align: right; padding-right: 20px;">
                    <span>Spring Boot JPA实验</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 主要内容 -->
    <div class="layui-container main-content">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <div class="layui-row">
                            <div class="layui-col-md6">
                                <h3>学生信息列表</h3>
                            </div>
                            <div class="layui-col-md6">
                                <div class="header-btns">
                                    <button id="addStudentBtn" class="layui-btn layui-btn-normal">
                                        <i class="layui-icon layui-icon-add-1"></i> 添加学生
                                    </button>
                                    <div id="studentCount" class="layui-btn layui-btn-primary">加载中...</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-even lay-skin="line">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>姓名</th>
                                    <th>学号</th>
                                    <th>年龄</th>
                                    <th>性别</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="studentTableBody">
                                <!-- 数据将通过AJAX加载 -->
                                <tr>
                                    <td colspan="6" style="text-align: center;">加载中...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部 -->
    <div class="layui-footer">
        <p>&copy; 2022级学生管理系统 - JPA实验项目</p>
    </div>
    
    <!-- 添加/编辑学生的表单模板 -->
    <script type="text/html" id="studentFormTpl">
        <form class="layui-form" id="studentForm" style="padding: 20px;">
            <input type="hidden" name="id" id="studentId">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="studentName" required lay-verify="required" placeholder="请输入姓名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学号</label>
                <div class="layui-input-block">
                    <input type="text" name="sno" id="studentSno" required lay-verify="required" placeholder="请输入学号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input type="number" name="age" id="studentAge" required lay-verify="required|number" placeholder="请输入年龄" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="1" title="男" checked>
                    <input type="radio" name="sex" value="0" title="女">
                </div>
            </div>
        </form>
    </script>
    
    <!-- 查看学生详情的模板 -->
    <script type="text/html" id="studentDetailTpl">
        <div style="padding: 20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">ID：</label>
                <div class="layui-input-block">
                    <div class="layui-form-mid" id="detailId"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名：</label>
                <div class="layui-input-block">
                    <div class="layui-form-mid" id="detailName"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学号：</label>
                <div class="layui-input-block">
                    <div class="layui-form-mid" id="detailSno"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄：</label>
                <div class="layui-input-block">
                    <div class="layui-form-mid" id="detailAge"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别：</label>
                <div class="layui-input-block">
                    <div class="layui-form-mid" id="detailSex"></div>
                </div>
            </div>
        </div>
    </script>
    
    <!-- LayUI JS -->
    <script th:src="@{/layui/layui.js}"></script>
    <script>
        layui.use(['layer', 'element', 'form', 'jquery'], function(){
            var layer = layui.layer;
            var element = layui.element;
            var form = layui.form;
            var $ = layui.jquery;
            
            // 加载学生数据
            function loadStudents() {
                $.ajax({
                    url: '/api/students',
                    type: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        if(res.code === 0) {
                            renderStudentTable(res.data);
                            $('#studentCount').text('共' + res.count + '条记录');
                        } else {
                            layer.msg('获取学生列表失败：' + res.message);
                        }
                    },
                    error: function() {
                        layer.msg('服务器错误，请稍后再试');
                    }
                });
            }
            
            // 渲染学生表格
            function renderStudentTable(students) {
                var html = '';
                if(students && students.length > 0) {
                    $.each(students, function(index, student) {
                        var rowClass = index % 2 === 1 ? 'highlight-row' : '';
                        var nameClass = student.name === '您的姓名' ? 'layui-badge layui-bg-green student-name' : 'student-name';
                        var snoClass = student.sno === '您的学号' ? 'layui-badge layui-bg-orange student-name' : '';
                        
                        html += '<tr class="' + rowClass + '">';
                        html += '<td>' + student.id + '</td>';
                        html += '<td><span class="' + nameClass + '" onclick="viewStudent(' + student.id + ')">' + student.name + '</span></td>';
                        html += '<td><span class="' + snoClass + '">' + student.sno + '</span></td>';
                        html += '<td>' + student.age + '</td>';
                        html += '<td><span class="gender-text">' + (student.sex == 1 ? '男' : '女') + '</span></td>';
                        html += '<td>';
                        html += '<button class="layui-btn layui-btn-xs" onclick="viewStudent(' + student.id + ')">查看</button>';
                        html += '<button class="layui-btn layui-btn-xs layui-btn-normal" onclick="editStudent(' + student.id + ')">编辑</button>';
                        html += '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteStudent(' + student.id + ')">删除</button>';
                        html += '</td>';
                        html += '</tr>';
                    });
                } else {
                    html = '<tr><td colspan="6" style="text-align: center;">暂无数据</td></tr>';
                }
                $('#studentTableBody').html(html);
            }
            
            // 初始化页面，加载数据
            loadStudents();
            
            // 添加学生按钮点击事件
            $('#addStudentBtn').on('click', function() {
                layer.open({
                    type: 1,
                    title: '添加学生',
                    content: $('#studentFormTpl').html(),
                    area: ['500px', '400px'],
                    btn: ['提交', '取消'],
                    success: function(layero, index) {
                        form.render(); // 重新渲染表单元素
                    },
                    yes: function(index, layero) {
                        // 获取表单数据
                        var formData = {
                            name: $('#studentName').val(),
                            sno: $('#studentSno').val(),
                            age: parseInt($('#studentAge').val()),
                            sex: $('input[name="sex"]:checked').val()
                        };
                        
                        // 提交数据
                        $.ajax({
                            url: '/api/students',
                            type: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify(formData),
                            success: function(res) {
                                if(res.code === 0) {
                                    layer.close(index);
                                    layer.msg('添加成功');
                                    loadStudents(); // 重新加载数据
                                } else {
                                    layer.msg('添加失败：' + res.message);
                                }
                            },
                            error: function() {
                                layer.msg('服务器错误，请稍后再试');
                            }
                        });
                    }
                });
            });
            
            // 编辑学生函数
            window.editStudent = function(id) {
                // 先获取学生信息
                $.ajax({
                    url: '/api/students/' + id,
                    type: 'GET',
                    success: function(res) {
                        if(res.code === 0) {
                            var student = res.data;
                            
                            layer.open({
                                type: 1,
                                title: '编辑学生',
                                content: $('#studentFormTpl').html(),
                                area: ['500px', '400px'],
                                btn: ['保存', '取消'],
                                success: function(layero, index) {
                                    // 填充表单数据
                                    $('#studentId').val(student.id);
                                    $('#studentName').val(student.name);
                                    $('#studentSno').val(student.sno);
                                    $('#studentAge').val(student.age);
                                    
                                    // 设置性别选中状态
                                    layero.find('input[name="sex"][value="' + student.sex + '"]').prop('checked', true);
                                    
                                    form.render(); // 重新渲染表单
                                },
                                yes: function(index, layero) {
                                    // 获取表单数据
                                    var formData = {
                                        id: $('#studentId').val(),
                                        name: $('#studentName').val(),
                                        sno: $('#studentSno').val(),
                                        age: parseInt($('#studentAge').val()),
                                        sex: layero.find('input[name="sex"]:checked').val()
                                    };
                                    
                                    // 提交更新
                                    $.ajax({
                                        url: '/api/students/' + id,
                                        type: 'PUT',
                                        contentType: 'application/json',
                                        data: JSON.stringify(formData),
                                        success: function(res) {
                                            if(res.code === 0) {
                                                layer.close(index);
                                                layer.msg('更新成功');
                                                loadStudents(); // 重新加载数据
                                            } else {
                                                layer.msg('更新失败：' + res.message);
                                            }
                                        },
                                        error: function() {
                                            layer.msg('服务器错误，请稍后再试');
                                        }
                                    });
                                }
                            });
                        } else {
                            layer.msg('获取学生信息失败：' + res.message);
                        }
                    },
                    error: function() {
                        layer.msg('服务器错误，请稍后再试');
                    }
                });
            };
            
            // 查看学生详情
            window.viewStudent = function(id) {
                $.ajax({
                    url: '/api/students/' + id,
                    type: 'GET',
                    success: function(res) {
                        if(res.code === 0) {
                            var student = res.data;
                            
                            layer.open({
                                type: 1,
                                title: '学生详情',
                                content: $('#studentDetailTpl').html(),
                                area: ['500px', '300px'],
                                success: function(layero, index) {
                                    // 填充数据
                                    $('#detailId').text(student.id);
                                    $('#detailName').text(student.name);
                                    $('#detailSno').text(student.sno);
                                    $('#detailAge').text(student.age);
                                    $('#detailSex').text(student.sex == 1 ? '男' : '女');
                                }
                            });
                        } else {
                            layer.msg('获取学生信息失败：' + res.message);
                        }
                    },
                    error: function() {
                        layer.msg('服务器错误，请稍后再试');
                    }
                });
            };
            
            // 删除学生
            window.deleteStudent = function(id) {
                layer.confirm('确定要删除这名学生吗？', {icon: 3, title:'提示'}, function(index){
                    $.ajax({
                        url: '/api/students/' + id,
                        type: 'DELETE',
                        success: function(res) {
                            if(res.code === 0) {
                                layer.msg('删除成功');
                                loadStudents(); // 重新加载数据
                            } else {
                                layer.msg('删除失败：' + res.message);
                            }
                            layer.close(index);
                        },
                        error: function() {
                            layer.msg('服务器错误，请稍后再试');
                            layer.close(index);
                        }
                    });
                });
            };
        });
    </script>
</body>
</html>